  <!-- 系统home 界面 -->
 
 <style>

#statistical ,#statistical .content,#statistial_bar{
 /* flex-shrink:1;
  flex-grow:1;*/
}
#statistical .content{
height:33vh;
}
  

</style>

 
 <div class="npanel ">
 <div class="title"> <div class="name">概况信息</div></div>
 <div class="content">
      <ul class="iteminfo">
       <li class="item"> <div class="name">概况信息</div><div class="val">3.265</div><div class="dval">V</div></li>
       <li class="item"> <div class="name">概况信息</div><div class="val">3.265</div><div class="dval">V</div></li>
       <li class="item"> <div class="name">概况信息</div><div class="val">3.265</div><div class="dval">V</div></li>
       <li class="item"> <div class="name">概况信息</div><div class="val">3.265</div><div class="dval">V</div></li>
       <li class="item"> <div class="name">概况信息</div><div class="val">3.265</div><div class="dval">V</div></li>
       <li class="item"> <div class="name">概况信息</div><div class="val">3.265</div><div class="dval">V</div></li>
      </ul>
   
 </div>
 
 </div>
 
  <div class="npanel  trends"  id="dayTrend">
 <div class="title"> <div class="name">当日趋势</div></div>
 <div class="content  d_echarts" id="trends">
 
 
  <div>
   
   </div>
   
 </div>
 
 </div>
 
 
 
 <script type="text/javascript">
 
    $(function(){
	 

		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('trends'));

		// 指定图表的配置项和数据
		function randomData() {
			now = new Date(+now + oneDay);
			value = value + Math.random() * 21 - 10;
			value1 = value1 + Math.random() * 22 - 5;
			return {
				time : now.format("yyyy/MM/dd hh:mm:ss"),// now.toString(),
				val : Math.round(value),
				val1 : Math.round(value1)
			/*    
			   value: [
			       [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
			       Math.round(value),
			       Math.round(value+100)
			   ] */
			}
		}
		var axis_time = []
		var P_all = [];//发电量
		var P_single = []; //功率
		var now = +new Date(1997, 9, 3);
		var oneDay = 24 * 3600 * 1000;
		var value = Math.random() * 1000;
		var value1 = Math.random() * 100;
		for (var i = 0; i < 1000; i++) {
			var d = randomData();
			axis_time.push(d.time);
			P_all.push(d.val);
			P_single.push(d.val1);
		}

		option = {
		  
			title : {
				text : '发电趋势',
			   textStyle:{fontWeight:'bold', color:'#fff'}
			},
			tooltip : {
				trigger : 'axis',
				/*      formatter: function (params) {
				         params = params[0];
				         var date = new Date(params.name);
				         return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
				     }, */
				axisPointer : {
					animation : false
				}
			},
			legend : {
				data : [{
	                name:'累计发电量(万kWh)',
	                icon : 'bar',
	                textStyle:{fontWeight:'bold', color:'#fff'}
	            },  {
	                name:'功率(kW)',
	                icon : 'line',
	                textStyle:{fontWeight:'bold', color:'#fff'}
	            }   ]
			},
			grid : {
				left : '3%',
				right : '6%', 
				bottom : '4%',
				containLabel : true
			}
			/*     'value' 数值轴，适用于连续数据。
			 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
			 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
			 'log' 对数轴。适用于对数数据。 */
			,
			xAxis : {
				type : 'category',//'category'
				splitLine : {
					show : false
				},
				axisLine: { 
	                lineStyle:{color:'#fff'}
	            },

				data : axis_time,
			},
			yAxis : [ {
				name : '累计发电量(万kWh)',
				type : 'value',
				boundaryGap : [ 0, '100%' ],
				splitLine : {
					show : false
				},
				axisLine: { 
	                lineStyle:{color:'#fff'}
	            }
			}, {
				name : '功率(kW)',
				type : 'value',
				boundaryGap : [ 0, '100%' ],
				splitLine : {
					show : false
				},
				axisLine: { 
	                lineStyle:{color:'#fff'}
	            }
			} ],
			series : [ {
				name : '累计发电量(万kWh)',
				type : 'line',
				showSymbol : false,
				hoverAnimation : false,
				areaStyle : {
					normal : {}
				},
				itemStyle : {
					normal : {
						areaStyle : {
							type : 'default'
						}
					}
				},
				//   areaStyle: {normal: {areaStyle: {type: 'default'}}},
				data : P_all
			}, {
				name : '功率(kW)',
				type : 'line',
				showSymbol : false,
				hoverAnimation : false,
				yAxisIndex : 1 ,
				itemStyle : {  
                    normal : {  
                    	color:'#00FF00' ,
                        lineStyle:{  
                            color:'#00FF00'  
                        }  
                    }  
                },
				data : P_single
			} ]
		};
 
		/*    setInterval(function () {

		 for (var i = 0; i < 5; i++) {
		 P_single.shift();
		 P_all.shift();
		 axis_time.shift();
		 var d=randomData();
		 axis_time .push(d.time);
		 P_all.push(d.val);
		 P_single .push(d.val1);
		 }

		 myChart.setOption({
		 xAxis:{ 
		 data:axis_time
		 } ,
		 series: [ {
		 data: P_all  
		 } , {
		 data: P_single  
		 }]
		 });
		 }, 1000);   */

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	});
  
    $(function(){
   	    
    	//初始化数据
	    var category = ['A光伏站', 'B光伏站', 'C光伏站', 'D光伏站', 'E光伏站', 'F光伏站', 'G光伏站', 'B光伏站', 'C光伏站', 'D光伏站', 'E光伏站', 'F光伏站', 'G光伏站'];
	    var barData = [31.00, 21.42, 12.18, 58.1, 43.1, 38.3, 16.3, 21.42, 12.18, 58.1, 43.1, 38.3, 16.3];
    	$("#statistial_bar").height(category.length*36);

		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('statistial_bar'));

		 
          
	    var option = {
	        
	        tooltip: {
	            trigger: 'axis',
	            axisPointer: {
	                type: 'shadow'
	            },
	            formatter:function(params){
	            	var v=params[0];
	            	return v.name+":"+v.data.toFixed(2)+"%";
	            }
	        },
	        grid: {
	            left: '2%',
	            right: '8%',
	            top: '5%', 
	            bottom: '2%', 
	            containLabel: true
	        },
	        xAxis: {
	            type: 'value',
	             
	            splitLine: {lineStyle:{type:'dashed'}},
	             
	           
	            axisTick: {
	                show: false
	            } ,
				axisLine: { 
					  show: false,
	                lineStyle:{color:'#fff'}
	            } 
	          /*   ,
	            axisLine: {
	                show: false
	            },
	            axisTick: {
	                show: false
	            } */
	        },
	        yAxis: {
	            type: 'category',
	            data: category,
	           
	            splitLine: {show: false},
	            axisLine: {
	                show: false
	            },
	           
	            axisTick: {
	                show: false
	            },
	            splitLine:{show:false},
	            offset: 10,
	            nameTextStyle: {
	                fontSize: 15
	            },
				axisLine: { 
	                lineStyle:{color:'#fff'}
	            }
	        },
	        series: [
	            {
	                name: '数量',
	                type: 'bar',
	                data: barData,
	                barWidth: 14,
	                barGap: 50,
	                barCategoryGap:50,
	                smooth: true,
	                label: {
	                    normal: {
	                        show: true,
	                        position: 'right',
	                        offset: [5, -2],
	                        textStyle: {
	                            color: '#fff',
	                            fontSize: 13
	                        }//,formatter: '{c}%' //万kWh   小时
	                        ,formatter: function (a, b,c) { 
	                        	 
	                        	 return a.data.toFixed(2)+"%" ;; 
	                        } 
	                    }
	                },
	                itemStyle: {
	                    emphasis: {
	                        barBorderRadius: 7
	                    },
	                 
	                    normal: {
	                    	 
	                        barBorderRadius: 7,
	                        color: new echarts.graphic.LinearGradient(
	                            0, 0, 1, 0,
	                            [
	                                {offset: 0, color: '#3977E6'},
	                                {offset: 1, color: '#00aa00'}

	                            ]
	                        )
	                    }
	                }
	            }
	        ]
	    };
	    // 选择数据的时候根据 数据量  也就 bar 的数量 确定 bar的 container的 高度 bar的高度可以显示滚动条
		myChart.setOption(option);
	});
</script>
 <div class="npanel" id="statistical">
 <div class="title"> <div class="name">厂站指标统计排名</div></div>
 <div class="content panel">
     <div class="tabPageTitle">
       <div class="item">  数据日合格率 </div>
       <div class="item"> 通道日正常率 </div>
       <div class="item"> 当前发电效率 </div>
       <div class="item active">  年累计发电量</div>
       <div class="item"> 年等效利用小时数</div>
     </div>
     <div class="content   scroll"  >
       <div class="d_echarts"  id="statistial_bar"></div>
     
     </div>
   
 </div>
 </div>